
<script>
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';

export default {
  name: 'security-setting',
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {
    // 定义 validateConfirmPassword 函数
    const validateConfirmPassword = (rule, value, callback) => {
      if (value !== passwordForm.value.newPassword) {
        callback(new Error('两次输入的密码不一致!'));
      } else {
        callback();
      }
    };

    const passwordForm = ref({
      oldPassword: '',
      newPassword: '',
      confirmPassword: '',
    });

    const phoneForm = ref({
      newPhone: '',
    });

    const emailForm = ref({
      newEmail: '',
    });

    const passwordRules = {
      oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
      newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
      confirmPassword: [
        { required: true, message: '请确认新密码', trigger: 'blur' },
        { validator: validateConfirmPassword, trigger: 'blur' },
      ],
    };

    const phoneRules = {
      newPhone: [
        { required: true, message: '请输入新手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' },
      ],
    };

    const emailRules = {
      newEmail: [
        { required: true, message: '请输入新邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
      ],
    };

    const submitPasswordForm = () => {
      passwordForm.value.validate((valid) => {
        if (valid) {
          // 这里可以添加实际的修改密码逻辑
          console.log('密码修改成功!');
        } else {
          console.log('修改密码失败!');
          return false;
        }
      });
    };

    const submitPhoneForm = () => {
      phoneForm.value.validate((valid) => {
        if (valid) {
          // 这里可以添加实际的修改手机号逻辑
          console.log('手机号修改成功!');
        } else {
          console.log('修改手机号失败!');
          return false;
        }
      });
    };

    const submitEmailForm = () => {
      emailForm.value.validate((valid) => {
        if (valid) {
          // 这里可以添加实际的修改邮箱逻辑
          console.log('邮箱修改成功!');
        } else {
          console.log('修改邮箱失败!');
          return false;
        }
      });
    };

    return {
      passwordForm,
      phoneForm,
      emailForm,
      passwordRules,
      phoneRules,
      emailRules,
      submitPasswordForm,
      submitPhoneForm,
      submitEmailForm,
    };
  },
};
</script>

<template>
  <div class="security-setting">
    <div class="info-row">
      <span>{{ $t('Setting.security.changePassword') }}：</span>
      <el-form :model="passwordForm" ref="passwordForm" :rules="passwordRules" label-width="150px">
        <el-form-item :label="$t('Setting.security.labels.oldPassword')" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" :placeholder="$t('Setting.security.placeholders.oldPassword')" />
        </el-form-item>
        <el-form-item :label="$t('Setting.security.labels.newPassword')" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" :placeholder="$t('Setting.security.placeholders.newPassword')" />
        </el-form-item>
        <el-form-item :label="$t('Setting.security.labels.confirmPassword')" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" :placeholder="$t('Setting.security.placeholders.confirmPassword')" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitPasswordForm">{{ $t('Setting.security.buttons.change') }}</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="info-row">
      <span>{{ $t('Setting.security.changePhone') }}：</span>
      <el-form :model="phoneForm" ref="phoneForm" :rules="phoneRules" label-width="150px">
        <el-form-item :label="$t('Setting.security.labels.newPhone')" prop="newPhone">
          <el-input v-model="phoneForm.newPhone" :placeholder="$t('Setting.security.placeholders.newPhone')" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitPhoneForm">{{ $t('Setting.security.buttons.change') }}</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="info-row">
      <span>{{ $t('Setting.security.changeEmail') }}：</span>
      <el-form :model="emailForm" ref="emailForm" :rules="emailRules" label-width="150px">
        <el-form-item :label="$t('Setting.security.labels.newEmail')" prop="newEmail">
          <el-input v-model="emailForm.newEmail" :placeholder="$t('Setting.security.placeholders.newEmail')" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitEmailForm">{{ $t('Setting.security.buttons.change') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<style scoped>
@import '/src/css/base.css';
@import "/src/css/setting/security-setting.css";
</style>

